<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
  <link rel="stylesheet" href="../static/css/me.css" >
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui dropdown item">
            <div class="text">
              <img class="ui avatar image" src="https://img1.imgtp.com/2023/08/11/66nI4otp.jpg" th:src="@{ ${session.user!=null} ? ${session.user.avatar}}">
              <span th:text="${session.user}!=null ? ${session.user.nickname}">专业团队</span>
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
              <a href="#" th:href="@{/update}" class="item">修改个人信息</a>
              <a href="#" th:href="@{/admin/blogs}" class="item">后台管理</a>
            </div>
          </div>
          </div>
        </div>
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container m-padded-tb-big animated fadeIn">
    <div class="ui container">
      <div class="ui stackable grid">
        <!--左边博客列表-->
        <div class="eleven wide column">
          <!--header-->
          <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
              <div class="column">
                <h3 class="ui teal header">博客</h3>
              </div>
              <div class="right aligned column">
                共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}"> 14 </h2> 篇
              </div>
            </div>
          </div>

          <!--content-->
          <div class="ui attached  segment">

            <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
              <div class="ui middle aligned mobile reversed stackable grid" >
                <div class="eleven wide column">
                  <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">你真的理解什么是财富自由吗?</a></h3>
                  <p class="m-text" th:text="|${blog.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}"  alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}" >专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2023-08-01</span>
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> <span th:text="${blog.views}">2342</span>
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <!--/*-->
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <div class="ui padded vertical segment m-padded-tb-large">
              <div class="ui mobile reversed stackable grid">
                <div class="eleven wide column">
                  <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                  <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                  <div class="ui grid">
                    <div class="eleven wide column">
                      <div class="ui mini horizontal link list">
                        <div class="item">
                          <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                          <div class="content"><a href="#" class="header">专业团队</a></div>
                        </div>
                        <div class="item">
                          <i class="calendar icon"></i> 2023-08-01
                        </div>
                        <div class="item">
                          <i class="eye icon"></i> 2342
                        </div>
                      </div>
                    </div>
                    <div class="right aligned five wide column">
                      <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                  </div>
                </div>

                <div class="five wide column">
                  <a href="#" target="_blank">
                    <img src="https://unsplash.it/800/450?image=1005"  alt="" class="ui rounded image">
                  </a>
                </div>

              </div>
            </div>
            <!--*/-->
          </div>

          <!--footer-->
          <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
            <div class="ui middle aligned two column grid">
              <div class="column">
                <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
              </div>
              <div class="right aligned column">
                <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
              </div>
            </div>
          </div>

        </div>

        <!--右边的top-->
        <div class="five wide column">

          <!--分类-->
          <div class="ui segments">
            <div class="ui secondary segment">
              <div class="ui two column grid">
                <div class="column">
                  <i class="idea icon"></i>分类
                </div>
                <div class="right aligned column">
                  <a href="#" th:href="@{types/-1}" target="_blank">more <i class="angle double right icon"></i></a>
                </div>
              </div>
            </div>
            <div class="ui teal segment">
              <div class="ui fluid vertical menu" >
                <a href="#" th:href="@{/types/{id}(id=${type.id})}" target="_blank" class="item"  th:each="type : ${types}">
                  <span th:text="${type.name}">学习日志</span>
                  <div class="ui teal basic left pointing label" th:text="${#arrays.length(type.blogs)}">13</div>
                </a>
                <!--/*-->
                <a href="#" class="item">
                  思考与感悟
                  <div class="ui teal basic left pointing label">13</div>
                </a>
                <a href="#" class="item">
                  学习日志
                  <div class="ui teal basic left pointing label">13</div>
                </a>
                <a href="#" class="item">
                  学习日志
                  <div class="ui teal basic left pointing label">13</div>
                </a>
                <a href="#" class="item">
                  学习日志
                  <div class="ui teal basic left pointing label">13</div>
                </a>
                <a href="#" class="item">
                  学习日志
                  <div class="ui teal basic left pointing label">13</div>
                </a>
                <!--*/-->
              </div>
            </div>
          </div>

          <!--标签-->
          <div class="ui segments m-margin-top-large">
            <div class="ui secondary segment">
              <div class="ui two column grid">
                <div class="column">
                  <i class="tags icon"></i>标签
                </div>
                <div class="right aligned column">
                  <a href="#" th:href="@{tags/-1}" target="_blank">more <i class="angle double right icon"></i></a>
                </div>
              </div>
            </div>
            <div class="ui teal segment">
              <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny" th:each="tag : ${tags}">
                <span th:text="${tag.name}">方法论</span> <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
              </a>
              <!--/*-->
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                方法论 <div class="detail">23</div>
              </a>
              <!--*/-->
            </div>
          </div>

          <!--最新推荐-->
          <div class="ui segments m-margin-top-large">
            <div class="ui secondary segment ">
              <i class="bookmark icon"></i>最新推荐
            </div>
            <div class="ui segment" th:each="blog : ${recommendBlogs}">
              <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-text-thin" th:text="${blog.title}">用户故事（User Story）</a>
            </div>
            <!--/*-->
            <div class="ui segment" >
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <div class="ui segment">
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <div class="ui segment">
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <div class="ui segment">
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <div class="ui segment">
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <div class="ui segment">
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <div class="ui segment">
              <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
            </div>
            <!--*/-->
          </div>

          <!--二维码-->
          <h4 class="ui horizontal divider header m-margin-top-large">WeChat</h4>
          <div class="ui centered card" style="width: 11em">
            <img src="../statichttps://img1.imgtp.com/2023/08/11/66nI4otp.jpg" th:src="@{https://img1.imgtp.com/2023/08/11/gv8msmZm.jpg}" alt="" class="ui rounded image" >
          </div>
        </div>

      </div>
    </div>

  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../statichttps://img1.imgtp.com/2023/08/11/66nI4otp.jpg" th:src="@{https://img1.imgtp.com/2023/08/11/66nI4otp.jpg}"  class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：2487774519@qq.com</a>
            <a href="#" class="item m-text-thin">QQ：2487774519</a>>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny"> © 2023 - 2023  Designed by 专业团队</p>
    </div>

  </footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });
  </script>

  <script type="text/javascript">
    $(".ui.dropdown").dropdown();
  </script>

</body>

<!--点击特效Begin-->
<script>
  (function () {
    var a_idx = 0;
    window.onclick = function (event) {
      var a = new Array("(๑◕ܫ￩๑)b","╮(๑•́ ₃•̀๑)╭"," (｡◕ฺˇε ˇ◕ฺ｡）","(ฅ′ω`ฅ)","♪（＾∀＾●）ﾉｼ","  ˶⚈Ɛ⚈˵ ",
              " (╬￣皿￣)凸","ʅ（′◔౪◔）ʃ","ヾ(o◕∀◕)ﾉ ","♥(｡￫v￩｡)♥");

      var heart = document.createElement("b"); //创建b元素
      heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

      document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
      a_idx = (a_idx + 1) % a.length;
      heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

      var f = 16, // 字体大小
              x = event.clientX - f / 2, // 横坐标
              y = event.clientY - f, // 纵坐标
              c = randomColor(), // 随机颜色
              a = 1, // 透明度
              s = 1.2; // 放大缩小

      var timer = setInterval(function () { //添加定时器
        if (a <= 0) {
          document.body.removeChild(heart);
          clearInterval(timer);
        } else {
          heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                  c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                  s + ");";

          y--;
          a -= 0.016;
          s += 0.002;
        }
      }, 15)

    }
    // 随机颜色
    function randomColor() {

      return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
              .random() * 255)) + ")";

    }
  }());
</script>
<!--点击特效End-->

<!--&lt;!&ndash;樱花特效Begin&ndash;&gt;-->
<!--<script>-->
<!--  let stop, staticx;-->
<!--  const img = new Image();-->
<!--  img.src = "";-->

<!--  function Sakura(x, y, s, r, fn) {-->
<!--    this.x = x;-->
<!--    this.y = y;-->
<!--    this.s = s;-->
<!--    this.r = r;-->
<!--    this.fn = fn;-->
<!--  }-->

<!--  Sakura.prototype.draw = function (cxt) {-->
<!--    cxt.save();-->
<!--    const xc = 40 * this.s / 4;-->
<!--    cxt.translate(this.x, this.y);-->
<!--    cxt.rotate(this.r);-->
<!--    cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)-->
<!--    cxt.restore();-->
<!--  }-->

<!--  Sakura.prototype.update = function () {-->
<!--    this.x = this.fn.x(this.x, this.y);-->
<!--    this.y = this.fn.y(this.y, this.y);-->
<!--    this.r = this.fn.r(this.r);-->
<!--    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {-->
<!--      this.r = getRandom('fnr');-->
<!--      if (Math.random() > 0.4) {-->
<!--        this.x = getRandom('x');-->
<!--        this.y = 0;-->
<!--        this.s = getRandom('s');-->
<!--        this.r = getRandom('r');-->
<!--      } else {-->
<!--        this.x = window.innerWidth;-->
<!--        this.y = getRandom('y');-->
<!--        this.s = getRandom('s');-->
<!--        this.r = getRandom('r');-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  SakuraList = function () {-->
<!--    this.list = [];-->
<!--  }-->
<!--  SakuraList.prototype.push = function (sakura) {-->
<!--    this.list.push(sakura);-->
<!--  }-->
<!--  SakuraList.prototype.update = function () {-->
<!--    let i = 0, len = this.list.length;-->
<!--    for (; i < len; i++) {-->
<!--      this.list[i].update();-->
<!--    }-->
<!--  }-->
<!--  SakuraList.prototype.draw = function (cxt) {-->
<!--    let i = 0, len = this.list.length;-->
<!--    for (; i < len; i++) {-->
<!--      this.list[i].draw(cxt);-->
<!--    }-->
<!--  }-->
<!--  SakuraList.prototype.get = function (i) {-->
<!--    return this.list[i];-->
<!--  }-->
<!--  SakuraList.prototype.size = function () {-->
<!--    return this.list.length;-->
<!--  }-->

<!--  function getRandom(option) {-->
<!--    let ret, random;-->
<!--    switch (option) {-->
<!--      case 'x':-->
<!--        ret = Math.random() * window.innerWidth;-->
<!--        break;-->
<!--      case 'y':-->
<!--        ret = Math.random() * window.innerHeight;-->
<!--        break;-->
<!--      case 's':-->
<!--        ret = Math.random();-->
<!--        break;-->
<!--      case 'r':-->
<!--        ret = Math.random() * 6;-->
<!--        break;-->
<!--      case 'fnx':-->
<!--        random = -0.5 + Math.random();-->
<!--        ret = function (x, y) {-->
<!--          return x + 0.5 * random - 1.7;-->
<!--        };-->
<!--        break;-->
<!--      case 'fny':-->
<!--        random = 1.5 + Math.random() * 0.7-->
<!--        ret = function (x, y) {-->
<!--          return y + random;-->
<!--        };-->
<!--        break;-->
<!--      case 'fnr':-->
<!--        random = Math.random() * 0.03;-->
<!--        ret = function (r) {-->
<!--          return r + random;-->
<!--        };-->
<!--        break;-->
<!--    }-->
<!--    return ret;-->
<!--  }-->

<!--  function startSakura() {-->

<!--    requestAnimationFrame = window.requestAnimationFrame ||-->
<!--            window.mozRequestAnimationFrame ||-->
<!--            window.webkitRequestAnimationFrame ||-->
<!--            window.msRequestAnimationFrame ||-->
<!--            window.oRequestAnimationFrame;-->
<!--    let canvas = document.createElement('canvas'),-->
<!--            cxt;-->
<!--    staticx = true;-->
<!--    canvas.height = window.innerHeight;-->
<!--    canvas.width = window.innerWidth;-->
<!--    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');-->
<!--    canvas.setAttribute('id', 'canvas_sakura');-->
<!--    document.getElementsByTagName('body')[0].appendChild(canvas);-->
<!--    cxt = canvas.getContext('2d');-->
<!--    const sakuraList = new SakuraList();-->
<!--    for (let i = 0; i < 50; i++) {-->
<!--      let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;-->
<!--      randomX = getRandom('x');-->
<!--      randomY = getRandom('y');-->
<!--      randomR = getRandom('r');-->
<!--      randomS = getRandom('s');-->
<!--      randomFnx = getRandom('fnx');-->
<!--      randomFny = getRandom('fny');-->
<!--      randomFnR = getRandom('fnr');-->
<!--      sakura = new Sakura(randomX, randomY, randomS, randomR, {-->
<!--        x: randomFnx,-->
<!--        y: randomFny,-->
<!--        r: randomFnR-->
<!--      });-->
<!--      sakura.draw(cxt);-->
<!--      sakuraList.push(sakura);-->
<!--    }-->
<!--    stop = requestAnimationFrame(function () {-->
<!--      cxt.clearRect(0, 0, canvas.width, canvas.height);-->
<!--      sakuraList.update();-->
<!--      sakuraList.draw(cxt);-->
<!--      stop = requestAnimationFrame(arguments.callee);-->
<!--    })-->
<!--  }-->

<!--  window.onresize = function () {-->
<!--    const canvasSnow = document.getElementById('canvas_sakura');-->
<!--    canvasSnow.width = window.innerWidth;-->
<!--    canvasSnow.height = window.innerHeight;-->
<!--  }-->

<!--  img.onload = function () {-->
<!--    startSakura();-->
<!--  }-->

<!--  function stopp() {-->
<!--    if (staticx) {-->
<!--      const child = document.getElementById("canvas_sakura");-->
<!--      child.parentNode.removeChild(child);-->
<!--      window.cancelAnimationFrame(stop);-->
<!--      staticx = false;-->
<!--    } else {-->
<!--      startSakura();-->
<!--    }-->
<!--  }-->
<!--</script>-->
<!--&lt;!&ndash;樱花特效End&ndash;&gt;-->
</html>